<template>
    <div>
        <el-table
                :data="tableData"
                stripe
                style="width: 100%">
            <el-table-column
                    type="index"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="clothesMaterialName"
                    label="衣物材质"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="washKindName"
                    label="洗衣方式"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="clothesKindName"
                    label="衣物种类"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="clothesPrice"
                    label="价格"
                    width="180">
            </el-table-column>
            <el-table-column label="衣物状态" prop="status" width="180" sortable>
                <template v-slot="scope">
                    <el-progress v-if="scope.row.clothesIsbad==0" :percentage="scope.row.percentage" :color="customColor(scope.row.percentage,scope.row.clothesId,scope.$index)"></el-progress>
                    <p v-else> 衣服已损坏</p>
                </template>
            </el-table-column>
            <el-table-column label="操作" prop="orderId" width="400" fixed="right">
                <template v-slot="scope">
                    <el-popconfirm confirm-button-text='确认' cancel-button-text='取消' icon="el-icon-info"
                                   icon-color="yellow"
                                   title="请仔细检查，确认损坏吗？" @confirm="bad(scope.row.clothesId)">
                        <el-button style="margin-right: 3px" v-if="scope.row.clothesIsbad==0" type="primary"
                                   slot="reference">衣物损坏
                        </el-button>
                    </el-popconfirm>
                    <el-button type="primary" v-if="scope.row.clothesIsbad==0 && scope.row.flag==0" @click="nextstep(scope.row.clothesId)">
                        {{scope.row.stepName}}
                    </el-button>

                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div style="margin-top: 10px;">
            <el-pagination background :current-page="params.pageNum" :page-size="params.pageSize"
                           layout="prev, pager, next" :total="total" @current-change="handleCurrentChange">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import request from "@/request"

    export default {
        name: "OrderItemInfo1",
        data(){
            return{
                orderId : this.$route.query.param,
                status : this.$route.query.flag,
                flag: 0,
                total: 0,
                tableData:[

                ],
                params: {
                    pageNum: 1,
                    pageSize: 6,

                },
            }
        },
        methods:{
            load() {
                this.params.orderId=this.orderId
                request.get('/order/info', {
                    params: this.params
                }).then(res => {
                    if (res.code === "200") {
                        this.total = res.data.total;
                        this.tableData = res.data.list;
                        this.tableData.forEach((e)=>{
                            e.flag=0
                        })
                    }

                })
            },
            customColor(percentage,clothesId,index) {
                if (percentage == 100) {
                    this.tableData[index].flag=1;
                    request.put('/clothes/finish/'+clothesId).then(res => {
                        if (res.code === '200') {
                            this.$notify.success('洗衣完成')
                        } else {
                            this.$notify.error(res.msg)
                        }
                    })
                    return '#67c23a';
                } else  {
                    return '#e6a23c';
                }
            },
            bad(clothesId){
                request.put('/clothes/isbad/'+clothesId).then(res => {
                    if (res.code === '200') {
                        this.$notify.success('操作成功')
                        this.load(); //刷新列表
                    } else {
                        this.$notify.error(res.msg)
                    }
                })
            },
            nextstep(clothesId){
                request.put('/clothes/nextstep/'+clothesId).then(res => {
                    if (res.code === '200') {
                        this.$notify.success('操作成功')
                        this.load(); //刷新列表
                    } else {
                        this.$notify.error(res.msg)
                    }
                })
            }
        },
        mounted() {
            this.load()
        }

    }
</script>
